<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
 	String path = request.getContextPath();
 	request.setAttribute("path", path);
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
	content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword"
	content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,jQuery,CSS,HTML,RWD,Dashboard">
<link rel="shortcut icon" href="${path}/img/favicon.png">

<title>CoreUI - Open Source Bootstrap Admin Template</title>

<!-- Icons -->
<link href="${path}/css/font-awesome.min.css" rel="stylesheet">
<link href="${path}/css/simple-line-icons.css" rel="stylesheet">

<!-- Main styles for this application -->
<link href="${path}/css/styles.css" rel="stylesheet">
<link href="${path}/css/bootstraps.min.css" rel="stylesheet">

<!-- ================================================== -->
<!-- ================================================== -->
<!-- ================================================== -->

<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>
<script src="${path}/js/jquery.table2excel.js"></script>
 
<script type="text/javascript">

	    function myUpdate(id){
 	    	alert(id);
	 		$(".modal-body").load("${path}/auth/staff/detail","staffId="+id);
	
			 /* $(".update").slideToggle();  */
	/* 				var url = "${path}/auth/sysrole/detail?id="+id;
				window.open(url,"userdetail"); */
		}
	    
	    function btnStaff(){
	    	alert("导出成功");
	        $(".table-condensed").table2excel({
	            exclude: ".noExl",
	            name: "Excel Document Name",
	            filename: "myFileName",
	            exclude_img: true,
	            exclude_links: true,
	            exclude_inputs: true
	        });
	    }
	    function search(){
	    	var chnName=$("input[name=chnName]").val();	   
	    	var surName=$("input[name=surName]").val();
	    	if(chnName=='' && surName==''){
	    		$('#formIndex').submit();
	    		return;
	    	}
	    	 $.ajax({
				  "url":"${path}/auth/staff/isExitsChname",
				  "data": {"chnName":chnName,"surName":surName},  
				  "type":"POST",
				  "success":quent,
				  "error":function(){
				       alert("数据类型错误");
				       
				       /* $(this).next().html("数据操作异常"); */
				    }
			 });
	    	 
    	}
	    
	    function quent(data){
	    	/* alert(data); */
	    	if(data=="false"){
	    		
	    		alert("查无此人");	   
	    		
	    	}	    	
	    	$('#formIndex').submit();
	    
	    }
	    
	    function addStaff(){
			 var staffNum=$("input[name=staffNum]").val();
			 var chnName=$("input[name=chnName]").val();
			 var pwd=$("input[name=pwd]").val();
			 var mobile=$("input[name=mobile]").val();
			 
			/*  if($.trim(staffNum)=='' || $.trim(chnName)=='' || $.trim(pwd)==''){
				 alert("请输入必填项信息");
				 return;
			 } */
			 if($.trim(mobile).length>0){
				 if($.trim(mobile).length!=11){
					 alert("手机长度必须为11位");
					 return;
				 }
			 }
			
			 
			$('#staffForm').submit();
		}
    	function goPage(pageNum){
    		var pageNum= $("#pageNum").val(pageNum);
    		$('#staffSearchForm').submit();
    		
    	}
    	
    	function returnList(){
    		window.location.href="${path}/auth/staff/page";
    	}
	    
	    $(function(){
	    	var tbodys=document.getElementById('staInfos');
	    	var subTb=tbodys.childNodes;
	  
	    	if(subTb.length<=1){
	    		document.getElementById('excelOut').style.display="none";
	    		document.getElementById('nextPage').style.display="none";
	    		document.getElementById('prevPage').style.display="none";
	    			
	    	}
	    	var prevPage=document.getElementById('prevPage').value;
	    	var nextPage=document.getElementById('nextPage').value;
	    	
	    	if(prevPage==0){
	    		$('#prevPage').addClass("disabled");
	    	}
	    	if(nextPage==0){
	    		$('#nextPage').addClass("disabled");
	    	}
	    	var input = $('#pageNum');
	    	$(".pagination li").click(function(){
	    		var v=this.value;
	    		if(v==0){
	    			alert("faile");
	    			return;
	    		}
	    		/* alert(v); */
	    		input.val(v);
	    		$('#formIndex').submit();
	    	});
	    	
	    	
			 $("input[name=checkAll]").click(function(){
	    		if($(this).prop("checked")==true){
	                  $("input[name=checkSelect]").prop("checked","true");
	           		}else{
	                 $("input[name=checkSelect]").prop("checked","");
	             }
	              
	          });
			 
			 $("input[name=staffNum]").blur(function(){
				 var staffNum=$(this).val();

				  $.ajax({
					  "url":"${path}/auth/staff/isExitsNum",
					  "data":"staffNum="+staffNum,
					  "type":"GET",
					  "success":callback,
					  "error":function(){
					       alert("error");
					       
					       /* $(this).next().html("数据操作异常"); */
					    }
				 }) 
			 });
			
		});
	    function callback(data){
	    	if(data=="true"){
	    		$("input[name=addsbuton]").prop("disabled","");
	    	}else{
	    		alert("用户名已被注册");
	    		$("input[name=addsbuton]").prop("disabled","disabled");	 	
	    	}
	    }
	    
				
	 	function userrole(id){
			var checkedNum=$("input[name=checkSelect]:checked").length;
			if(checkedNum==0){
				$(".modal-quanxian").html("至少选择一项！");
				return;
			}else{
				var checkedList=new Array();
				$("input[name=checkSelect]:checked").each(function(){
					alert($(this).val());
					checkedList.push($(this).val());
				});
				$(".modal-quanxian").load("${path}/auth/userrole/showadd","delitems="+checkedList.toString());
			}
	 	}
	    
		function del(){
    			var checkedNum=$("input[name=checkSelect]:checked").length;
				if(checkedNum==0){
					alert("至少选择一项");
					return;
				}
				if(confirm("是否删除?")){
					location.href="${path}/auth/staff/page";
				}else{
					location.href="${path}/auth/staff/page";
				}
				var checkedList=new Array();
				$("input[name=checkSelect]:checked").each(function(){
					/* alert($(this).val()); */
					checkedList.push($(this).val());
				});
				$.ajax({
					type:"get",
					url:"${path}/auth/staff/del",
					dataType:"json",
					data:"delitems="+checkedList.toString(),
					success:function(data){
						alert("OK");
						window.location.href="${path}/auth/staff/page";
					}, 
					error:function(){
						window.location.href="${path}/auth/staff/page";
					}
				});
    		}
		
		
			
    </script>
<style type="text/css">
.disabled{
	pointer-events:none;
}
#right {
	width: 75%;
	height: 100px;
	float: right;
	position: absolute;
	top: 80px;
	left: 350px;
}

#context {
	position: absolute;
	top: 30px;
}

#context .roleNav {
	margin-bottom: 30px;
}

#context .roleNav ul {
	width: 100%;
	height: 30px;
}

#context .roleNav ul li {
	width: 125px;
	height: 30px;
	float: left;
	list-style: none;
}

#context .roleNav a {
	text-decoration: none;
}

.search {
	width: 600px;
	margin-left: 220px;
	margin-top: 30px;
}


#context table {
	width: 100%;
	height: auto;
	display: block;
	background-color: #CCCCCC;
}

#context table tr {
	width: 100%;
	height: auto;
	display: block;
}

#context table td, #context table th {
	width: 90px;
	height: 30px;
	float: left;
	display: block;
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
	border-bottom: 1px solid gray;
}

#context .staffPage input {
	width: 30px;
	height: 15px;
}

.poster {
	display: none;
	width: 350px;
	height: auto;
	background-color: #E5E5E5;
	position: fixed;
	top: 130px;
	left: 0px;
	right: 60px;
	bottom: 0px;
	margin-top: 58px;
	margin-left: 350px;
	border: 1px solid gray;
}

.poster label {
	width: 150px;
	height: 15px;
	text-align: right;
}

.poster h3 {
	text-align: center;
}

.poster input {
	width: 150px;
	display: inline-block;
}

.poster div {
	width: 350px;
	height: 50px;
}

.poster .button input {
	border-radius: 50px;
	width: 120px;
	display: inline-block;
	text-align: center;
	margin-left: 100px;
}

.update {
	display: none;
	width: 350px;
	height: auto;
	background-color: #E5E5E5;
	position: fixed;
	top: 130px;
	left: 0px;
	right: 60px;
	bottom: 0px;
	margin-top: 58px;
	margin-left: 350px;
	border: 1px solid gray;
}

.update label {
	width: 150px;
	height: 15px;
	text-align: right;
}

.update h3 {
	text-align: center;
}

.update input {
	width: 150px;
	display: inline-block;
}

.update div {
	width: 350px;
	height: 50px;
}

.update .button input {
	border-radius: 50px;
	width: 120px;
	display: inline-block;
	text-align: center;
	margin-left: 100px;
}

.add {
	width: 100px;
	margin-left: 150px;
	border-radius: 20px;
}

.del {
	width: 100px;
	margin-left: 60px;
	border-radius: 20px;
}

.leven {
	width: 100px;
	/*     		margin-left: 60px; */
	border-radius: 20px;
}

.buttonclore {
	width: 500px;
	margin-left: 150px;
}

.buttonclore li {
	/* width:400px; */
	list-style: none;
	float: right;
	margin-right: 50px;
	display: inline-block;
	border: 1px solid grey;
}

.modal-update {
	position: relative;
	padding: 15px
}
</style>
</head>
<body
	class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">


	<!-- 头部 -->
	<%@ include file="/share/header.jsp"%>
	<div class="app-body">
	
	<!-- 权限管理 -->
	<%@ include file="/share/sidebar.jsp"%>

	<!-- Main content -->
	<main class="main"> <!-- ！按钮================================ -->
	<!-- ！按钮================================ --> <!-- ！按钮================================ -->
	<!-- ！按钮================================ --> <!-- ！按钮================================ -->
	<div class="container-fluid">
		<div class="animated fadeIn">
			<div class="row">

				<div class="col-md-6" style="margin-bottom: 0px;">

					<!-- <div class="buttonclore">
						Secondary, outline button

						<ul>
							<li><input type="button" class="btn btn-outline-primary"
								value="权限配置"></li>
							
							<li><input type="button" class="btn btn-outline-success" value="添加" id="cl"></li>
							<li><input type="button" class="btn btn-outline-success"
								data-toggle="modal" data-target="#exampleModal"
								data-whatever="@mdo" value="添加" /></li>
						</ul>
					</div> -->

					<div class="search">
						<form id="formIndex" action="${path}/auth/staff/page"
							method="post">
							
							<label>用户名称：</label><input type="text" list="cars1" name="chnName" value="${staffInfo.chnName }">
								<datalist id="cars1"> 
									<c:forEach var="t" items="${tstaffInfos}">
										<option value=${t.chnName }></option>
									</c:forEach>
							</datalist>
							 
							<label>英文名：</label>
							<input type="text" list="car" name="surName" value="${staffInfo.surName }">
								<datalist id="car"> 
									<c:forEach var="t" items="${tstaffInfos}">
										<option value=${t.surName }></option>
									</c:forEach>
								 </datalist>
								 <input type="hidden" id="pageNum" name="pageNum" value="1" />
								   <input type="button" value="查询" class="btn btn-outline-secondary" onclick="search()" />
						</form>	
					</div>
				</div>
			</div>
		</div>


		<%-- 	<div id="right">
		<div id="context">
			<div class="roleNav">
				<ul>
					<li><input type="button" class="leven" value="权限配置"></li>
					<form action="javaScript:void(0)" method="get">
						<li><input type="button" class="del" value="删除" onclick="del();"/></li>
					</form>				
					<!-- <li><a href="javaScript:void(0)" onclick="del();">删除</a></li> -->
					<li><input type="button" class="add" value="新增" id="cl"/></li>
					<!-- <li><a href="#" id="ul">修改</a></li> -->
				</ul>
			</div>
			
			<div class="search">
			<form id="staffSearchForm" action="${path}/auth/staff/findByStaff" method="post">
				<label>用户名称：</label>
				<input type="text" name="chnName"/>
				<label>英文名：</label>
				<input type="text" name="surName"/>
				
				<input type="hidden" id="pageNum" name="pageNum" value="1"/> 
				<input type="button" value="查询" onclick="search()"/>
			</form>
			</div>
		</div>
	</div>	
 --%>
		<div id="fluid" class="container-fluid">
			<div class="animated fadeIn">
				<div class="row">
					<div class="col-lg-12">
						<div class="card">
							<div class="card-header">
								<i class="fa fa-align-justify"></i> Combined All Table
								<input type="button" class="btn btn-outline-success"
								data-toggle="modal" data-target="#exampleModal"
								data-whatever="@mdo" value="添加" />
								
								<input type="button" class="btn btn-outline-primary"
								data-toggle="modal" data-target="#exampleModal2"
								data-whatever="@mdo"
								value="权限配置" onclick="userrole();"/>
								
								<input type="button" style="float: right;" class="btn btn-outline-primary"
								onclick="returnList();"
								value="返回"/>
							</div>
							<div class="card-block">
								<table
									class="table table-bordered table-striped table-condensed">
									<thead>
										<tr>
											<th><input type="checkBox" name="checkAll"/>
											<input type="button" class="btn btn-outline-secondary" onclick="del();" value="删除"/>
												
											</th>
											<th>序号</th>
											<th>账号</th>
											<th>姓名</th>
											<th>英文全名</th>
											<th>手机</th>
											<th>操作</th>
										</tr>
									</thead>

									<tbody id="staInfos">
										<c:forEach var="s" items="${tstaffInfos}" varStatus="status">
											<tr>
												<td><input type="checkbox" name="checkSelect" value="${s.staffId }"></td>
												<td>${status.index+1}</td>
												<td><c:out value="${s.staffNum}"/></td>
												<td><c:out value="${s.chnName}"/></td>
												<td><c:out value="${s.surName}"/></td>
												<td><c:out value="${s.mobile}"/></td>
												<td><input type="button" class="btn btn-primary"
													data-toggle="modal" data-target="#exampleModal1"
													data-whatever="@mdo" value="修改"
													onclick="myUpdate('${s.staffId}')"></td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
								<%-- <div class="poster">
									 	<h3>用户添加</h3>
									 	<form action="${path}/auth/staff/addStaff" method="post">	
									 		<div>
												<label>ID：</label>
												<input type="text" name="staffId"/>
											</div>		 
											<div>
												<label>账号：</label>
												<input type="text" name="staffNum"/>
											</div>
											
											<div>
												<label>姓名：</label>
												<input type="text" name="chnName"/>
											</div>
											
											<div>
												<label>英文全名：</label>
												<input type="text" name="surName"/>
											</div>
											
											<div>
												<label>密码：</label>
												<input type="text" name="pwd" id="pwd"/>
											</div>
											
											<div>
												<label>手机：</label>
												<input type="text" name="mobile"/>
											</div>
											
											<div class="button">
												<input type="submit" value="新增"/>
											</div>
									 </form>
									 </div>
									 
									 <div class="update"></div> --%>

								<nav>
								<ul class="pagination">

									<li id="prevPage" value="${queryByPage.prePage}" class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li> 
										<c:forEach var="p" items="${queryByPage.navigatepageNums}" varStatus="status">
											<li value="${p}" class="page-item active"><a class="page-link" href="javascript:void(0)">${p}</a>
											</li>
										</c:forEach> 
									<li id="nextPage" value="${queryByPage.nextPage}" class="page-item"><a class="page-link" href="javascript:void(0)">下一页</a></li> 
									<input id="excelOut" style="border:1px solid grey; margin-left: 500px;" class="btn btn-primary" type="button" value="导出到Excel" onclick="btnStaff()"/>	
								</ul>													
								</nav>								
							</div>
						</div>
					</div>
					<!--/.col-->
				</div>
			</div>
		</div>
	</main>
	</div>
	<div>
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">用户添加</h4>
					</div>
					<div class="modal-update">
						<form id="staffForm" action="${path}/auth/staff/addStaff" method="post">
							<div class="form-group">
								<label for="staffNum" class="control-label">账号：</label> <input
									type="text" class="form-control" name="staffNum" id="staffNum" placeholder="(必填项)"/>
							</div>
							<div class="form-group">
								<label for="chnName" class="control-label">姓名：</label> <input
									type="text" class="form-control" name="chnName" id="chnName" placeholder="(必填项)"/>
							</div>
							<div class="form-group">
								<label for="surName" class="control-label">英文全名：</label> <input
									type="text" class="form-control" name="surName" id="surName"/>
							</div>
							<div class="form-group">
								<label for="pwd" class="control-label">密码：</label> <input
									type="text" class="form-control" name="pwd" id="pwd" placeholder="(必填项)"/>
							</div>
							<div class="form-group">
								<label for="mobile" class="control-label">手机：</label> <input
									type="text" class="form-control" name="mobile" id="mobile" placeholder="(必填项)"/>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<input type="button" class="btn btn-primary" name="addsbuton" value="新增"  onclick="addStaff();"/>
						</form>
					</div>
				</div>



			</div>
		</div>
	</div>
	<div>
		<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">用户修改</h4>
					</div>
					<div class="modal-body"></div>
				</div>

			</div>
		</div>

	</div>
	
	<div>
		<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="exampleModalLabel">权限配置</h4>
					</div>
					<div class="modal-quanxian"></div>
				</div>

			</div>
		</div>

	</div>

</body>
</html>